<template>
	<view class="button-component" :class="className" @click="onSubmit">
		<view class="light"></view>
		<view class="btn-txt">{{ btnTxt}}</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue';
	const props = defineProps({
		btnTxt: {
			required: true,
			type: String,
		},
		theme: {
			required: true,
			type: String,
			default: 'yellow' // yellow | green
		}
	})
	const className = computed(() => props.theme)
	const emits = defineEmits(['onOk'])
	const onSubmit = () => {
		emits("onOk")
	}
</script>

<style scoped lang="scss">
	.button-component{
		// width: 280px;
		width: 90%;
		margin:0 auto;
		position:relative;
		height: 122upx;
		box-shadow: inset 0upx 0upx 20upx 0upx #FFF9E8;
		border-radius: 160upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.light{
		position: absolute;
		top: 32upx;
		right: 60upx;
		width: 104upx;
		height: 12upx;
		background: #FFFFFF;
		border-radius: 8upx;
		opacity: 0.8;
		filter: blur(4upx);
	}
	.yellow{
		background: linear-gradient(#FAD663 0%, #FFDF76 100%);
		border: 2upx solid #FFDE71;
		.btn-txt{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36upx;
			color: #DF2626;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
	.green{
		background: linear-gradient(#2BC888 0%, #6DF8BF 100%);
		border: 2upx solid #74F8C2;
		.btn-txt{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36upx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
</style>